<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tr><td>照片：</td><td id="pic_td"></td></tr>
        <tr><td>姓名：</td><td id="name_td"></td></tr>
        <tr><td>年龄：</td><td id="age_td"></td></tr>
        <tr><td>好友：</td><td id="friends_td"></td></tr>
    </table>
    <input type="button" value="加载数据" onclick="load()">
</body>
<script>
    function load() {
        //得到页面中的td
        let picTd = document.querySelector("#pic_td");
        let nameTd = document.querySelector("#name_td");
        let ageTd = document.querySelector("#age_td");
        let friendsTd = document.querySelector("#friends_td");

        //服务器返回的数据，使用自定义的js的对象保存
        let person = {
            name:"诸葛亮",
            age:18,
            url:"zgl.jpg",
            friends:["张飞","关羽","刘备"]
        };

        //把从服务器中得到的数据，显示到页面中
        nameTd.innerText = person.name;
        ageTd.innerText = person.age;

        //创建图片的标签
        let img = document.createElement("img");
        img.src = person.url;
        img.width = 100;
        picTd.append(img);

        //好友列表
        let ul = document.createElement("ul");
        for (let friend of person.friends) {
            let li = document.createElement("li");
            li.innerText = friend;
            ul.append(li);
        }
        friendsTd.append(ul);
    };
</script>
</html>
